<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Title</title>

    <style>
        /*如何一个页面适应不同屏幕大小，也就是在不同大小的屏幕中展示出的效果是一致的。首先我们需要设定一个基本方案，例如基本常见的屏幕大小是750px，*/
        /*那我们就按750px的屏幕大小来设计，首先最重要的是确定750px页面屏幕的html的fontsize大小。一般在设计中我们吧整个屏幕分成10或者15份，20份*/
        /*方便我们计算此大小屏幕的html的fontsize值，如果我们分成15份则这个750px页面大小的屏幕的html的fontsize值为750/15px。只要我们计算出这*/
        /*个基本方案中html的fontsize的大小，得出基本页面与这个fontsize的比例，因为在设计页面中所有的元素都是根据fontsize的大小来确定值，所以只要比例不变，*/
        /*那么其他方案的不同大小的屏幕中显示出的这个页面也会根据不同大小的屏幕来等比例的进行放大和缩放，最后我们可以知道这个比例也就是我们之前确定好划分的份数
        也就是同样一个页面若在宽750px的屏幕大小和1500的屏幕大小展示效果一样，那么宽为750px的屏幕根据划分15份得出最后fontsize为50px，则1500px的屏幕也
        需要划分15份得出fontsize，这样根据比例划分得出的fontsize。页面中的元素才会根据比例进行缩放和放大最终在不同的屏幕中呈现出来的效果才会一样
        */

    @media screen and (min-width: 375px) {
            html {

                /*font-size: 1px;*/
                font-size:50px
            }
        }
		

		@media screen and (min-width: 640px) {
            html {

                /*font-size: 1px;*/
                font-size:100px
            }
        }
		@media screen and (min-width: 1500px) {
		    html {
		
		        /*font-size: 1px;*/
		        font-size:10px
		    }
		}
    </style>
</head>
<body>
<div style="width:100%;height: 1rem;background-color: #00FF00;font-size:.5rem;line-height: 4rem;text-align: center;"></div>

</body>
</html>